<template>
  <div class="qq_newSong_firstRound" id="content">
    <div class="section_inner">
      <div class="index__hd">
        <h2 class="index__tit"><i class="icon_txt"></i></h2>
      </div>
      <a class="qq_newSong_mod_btn">
        <i class="qq_newSong__icon_play iconfont icon-bofangsanjiaoxing"> </i>
        播放全部
      </a>
      <div class="mod_index_tab">
        <a class="index_tab__item index_tab__item--current">最新</a><a class="index_tab__item">内地</a><a
          class="index_tab__item">港台</a><a class="index_tab__item">欧美</a><a class="index_tab__item">韩国</a><a
          class="index_tab__item">日本</a>
      </div>
      <div class="qq_playlist mod_slide">
        <div class="swiper-father">
          <div class="swiper-container" id="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="mod_debutlist">
                  <div class="slide__list">
                    <ul class="debutlist__list">
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="#">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="#">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="mod_debutlist">
                  <div class="slide__list">
                    <ul class="debutlist__list">
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="#">数到五1</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="#">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五1</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五1</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="mod_debutlist">
                  <div class="slide__list">
                    <ul class="debutlist__list">
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="#">数到五1</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="#">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五1</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五1</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                      <li class="debutlist__item">
                        <div class="debutlist__item_box">
                          <a class="debutlist__link mod_cover">
                            <img class="debutlist__pic mod_cover__mask"
                              src="//y.qq.com/music/photo_new/T002R300x300M000003A58ox2ieYpR_1.jpg?max_age=2592000" />

                            <i class="mod_cover__icon_play"> </i>
                          </a>
                          <div class="debutlist__cont">
                            <h3 class="debutlist__song">
                              <a href="/n/ryqq/songDetail/003KvuxB4Ez8Zq">数到五</a>
                            </h3>
                            <p class="debutlist__author">
                              <a class="c_tx_thin" title="BY2" href="/n/ryqq/singer/000Z1Ow71FFutX">BY2</a>
                            </p>
                          </div>
                          <div class="debutlist__time c_tx_thin">03:56</div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination" id="sw-pa"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev" id="sw-bu-pr" ref="sw-bu-pr"></div>
          <div class="swiper-button-next" id="sw-bu-ne" ref="sw-bu-ne"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "zNewSongFirstRound",
};
</script>

<script lang="ts" setup>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { onMounted, ref } from "vue";
onMounted(() => {
  new Swiper("#swiper", {
    spaceBetween: 20,
    speed: 1000, //切换时间
    loop: true, //无缝轮播
    pagination: {
      //小圆点
      el: ".swiper-pagination", //选择到小圆点容器
      clickable: true, //在控制小圆点是否可以被点击
    },
    navigation: {
      //左右按钮
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
  });
});
</script>

<style scoped>
/* 鼠标移入自动显示 */
.qq_newSong_firstRound:hover #sw-bu-pr {
  display: block;
  animation: pr 1s;
  left: -160px;
}

.qq_newSong_firstRound:hover #sw-bu-ne {
  display: block;
  animation: ne 1s;
  right: -160px;
}

/* 定义鼠标移入左右箭头的关键帧 */
@keyframes pr {
  0% {
    left: -300px;
  }

  100% {
    left: -160px;
  }
}

@keyframes ne {
  0% {
    right: -300px;
  }

  100% {
    right: -160px;
  }
}

/* 设置轮播图样式 对轮播图样式作二次修改 修改样式权重*/
#sw-pa {
  /* border: 1px solid red !important; */
  position: absolute;
  right: 50%;
  width: 60px;
  display: flex;
  justify-content: space-around;
  bottom: -120px;
}

#sw-pa .swiper-pagination-bullet {
  /* border: 1px solid green !important; */
  position: absolute !important;
}

/* #swiper {
   border: 1px solid red !important;
} */
.swiper-container {
  /* border: 1px solid red !important; */
  width: 1200px;
  /* height: 532px; */
}

.swiper-father {
  /* border: 1px solid green !important; */
  height: 224px;
  /* width: 1700px; */
  position: relative;
}

#sw-bu-pr,
#sw-bu-ne {
  position: absolute !important;
  /* border: 1px solid red; */
  display: inline-block;
  width: 100px;
  height: 133px;
  text-align: center;
  line-height: 133px;
  background-color: #e1e1e1;
  color: #000;
  top: 65.5px;
  z-index: 200;
}

#sw-bu-pr,
#sw-bu-ne {
  display: none;
}

#sw-bu-pr {
  left: -300px;
}

#sw-bu-ne {
  right: -300px;
}

/* 第三部分  新歌首发*/
.index__hd {
  position: relative;
  padding-top: 4.16667%;
  padding-bottom: 2%;
}

.index__hd .index__tit {
  margin: 0 auto;
  width: 196px;
  height: 40px;
  font-weight: bold;
  font-style: normal;
  /* background-image: url("./bac.png"); */
  background-image: -webkit-image-set(url("/src/assets/bac.png") 1x, url("/src/assets/bac.png") 2x);
  background-position: 0 290px;
}

.qq_newSong_firstRound {
  height: 566px;
  background-color: #f3f3f3;
}

.section_inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.qq_newSong_firstRound .mod_index_tab {
  height: 50px;
  text-align: center;
  font-size: 15px;
  /* border: 1px solid red; */
}

.qq_newSong_mod_btn {
  width: 123px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  position: absolute;
  left: 0;
  top: auto;
  margin-top: -10px;
  /* border: 1px solid red; */
  border: 1px solid #c9c9c9;
  color: #000;
}

.qq_newSong_firstRound .mod_index_tab a {
  display: inline-block;
  margin: 0 24px;
}

.qq_newSong_firstRound .mod_index_tab a:nth-child(1) {
  color: #31c27c;
}

.debutlist__list {
  display: flex;
  flex-wrap: wrap;
}

.debutlist__list .debutlist__item {
  display: inline-block;
  width: 33.333%;
  /* border: 1px solid red; */
  box-sizing: border-box;
  padding: 0 30px 13px 0;
}

.debutlist__pic {
  width: 86px;
  height: 86px;
}

.debutlist__item_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.debutlist__cont {
  /* width: 55%; */
  flex: 1;
  padding-left: 16px;
  color: 14px;
}

.debutlist__cont h3 a {
  font-size: 14px;
  color: #000;
}

.debutlist__cont p a {
  font-size: 14px;
  color: #999;
}

.debutlist__time {
  font-size: 14px;
  color: #999;
}
</style>
